<template>
  <a-row id="title-menu">
    <span>
<!--      <a class="logout_title" href="javascript:;">-->
<!--        <a-avatar size="small" icon="user" type="" />-->
<!--        <span class="action action-full ant-dropdown-link user-dropdown-menu">-->
<!--          <span style="padding: 0px 10px;">欢迎您，{{ $store.getters.realname }}</span>-->
<!--        </span>-->
<!--      </a>-->
      <a class="logout_title" href="javascript:;">
        <a-icon type="user" style="padding: 0px 10px 0px 20px"/>
        <span>欢迎您，{{ $store.getters.realname }}</span>
      </a>
      <a class="logout_title" href="javascript:;" @click="handleLogout">
        <a-icon type="logout" style="padding: 0px 10px 0px 20px"/>
        <span>关闭系统</span>
      </a>
    </span>
  </a-row>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'MrTitleMenu',
  methods: {
    ...mapActions(['Logout']),
    handleLogout () {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定关闭系统吗 ?',
        onOk () {
          return that.Logout({}).then(() => {
            window.open('about:blank', '_self').close()
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  #title-menu {
    color: white;
    height: 60px;
    line-height: 60px;
    padding-right: 50px;
    float: right;
    .menu-item {
      margin-right: 20px;
    }
    .logout_title {
      color: inherit;
      text-decoration: none;
      .anticon{
        font-size: 16px;
      }
    }
    .logout_title:first-child{
      padding-right: 30px;
    }
    .logout_title:last-child:hover{
      color: #ff8c00;
    }
  }
</style>
